<template>
  <view
    class="bottom-btn-group"
    :style="{
      zIndex,
    }"
  >
    <block v-if="mode == 'edit'">
      <view v-if="showDel" class="btn-del" @click="btnDelClick" size="mini">
        删除
      </view>
      <view class="btn-edit" @click="btnEditOrSaveSubmitClick" size="mini">
        保存
      </view>
    </block>
    <!-- 新增模式 -->
    <view
      v-else
      class="bottom-add"
      size="mini"
      @click="btnEditOrSaveSubmitClick"
    >
      保存
    </view>
  </view>
</template>
<script>
export default {
  props: {
    mode: {
      type: String,
      default: "add",
    },
    showDel: {
      type: Boolean,
      default: true,
    },
    zIndex: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    btnDelClick() {
      this.$emit("btnDelClick");
    },
    btnEditOrSaveSubmitClick() {
      this.$emit("btnEditOrSaveSubmitClick");
    },
  },
};
</script>
<style lang="scss" scoped>
$white: #fff;
$black: #000;
$l-form-border-color: #d0d0d0; //  表单边框颜色
$l-btn-del-bgc: #f56c6c; // 删除按钮背景色
$l-btn-save-bgc: #f3c45d; // 保存按钮背景色
$l-btn-add-bgc: #f3c45d; // 添加按钮背景色
// 底部按钮组
.bottom-btn-group {
  display: flex;
  align-items: center;
  position: fixed;
  background-color: $white;
  left: 0rpx;
  right: 0rpx;
  bottom: 0;
  height: 70px;
  // z-index: 9999;

  .btn-del {
    display: flex;
    flex: 1;
    margin-right: 15px;
    margin-left: 15px;
    align-items: center;
    justify-content: center;
    height: 49px;
    font-size: 18px;
    background-color: $l-btn-del-bgc;
    letter-spacing: 3px;
    color: #fff;
    font-weight: bold;
    border-radius: 10px;
  }

  .btn-edit {
    flex: 1;
    margin-left: 15px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 49px;
    font-size: 18px;
    background-color: $l-btn-save-bgc;
    letter-spacing: 3px;
    color: $white;
    font-weight: bold;
    border-radius: 10px;
  }
  .bottom-add {
    margin-right: 15px;
    margin-left: 15px;
    height: 50px;
    background-color: $l-btn-add-bgc;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 3px;
    flex: 1;
    color: $white;
    font-size: 18px;
    font-weight: bold;
    border-radius: 10px;
  }
}
</style>
